<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/include/taglibs.jsp"%>
<%
pageContext.setAttribute("crlf", "\r\n");
pageContext.setAttribute("lf", "\n");
pageContext.setAttribute("cr", "\r");
%>
<script type="text/javascript">
// $(document).ready(function(){
	
// });

//이메일 넣기
function changeEmail(val){
	if($(val).val()==''){
		$('#r_email2').show();
	}else{
		$('#r_email2').hide();
	}
	$('#r_email2').val($(val).val());
}

function sendData(){
	if(""==$("#reservation_nm").val()){
		alert("예약자명은 필수입력사항입니다");
		$("#reservation_nm").focus();
		return false;
	}
	if(""==$("#r_phone2").val()){
		alert("연락처는 필수입력사항입니다");
		$("#r_phone2").focus();
		return false;
	}
	if(""==$("#r_phone3").val()){
		alert("연락처는 필수입력사항입니다");
		$("#r_phone3").focus();
		return false;
	}
	<c:if test="${'Y'==pensionInfo.phone_yn }">
	if(!chkPhone){
		alert("연락처 인증해주세요");
		$("#r_phone3").focus();
		return false;		
	}
	</c:if>

	if(""==$("#send_bank_nm").val()){
		alert("입금자는 필수입력사항입니다");
		$("#send_bank_nm").focus();
		return false;
	}
	
	if(""==$("#agree_ref").val()){
		alert("이용안내 및 환불규정에 동의하셔야 예약이 가능합니다");
		$("#agree_ref").focus();
		return false;
	}
		
	$("#frmData").submit();
}

// 입금자명에 예약자명 넣기
function ck_same_user(){
	$("#send_bank_nm").val($("#reservation_nm").val());
}

var totalPay = ${totalPay};

//부가서비스 추가
function changeAddService(){
	var servicePay = 0;
	$("input[name='as_no_idxs']:checked").each(function (){
		servicePay+=Number($("input[name='as_pays']:eq("+$(this).val()+")").val())*
		Number($("select[name='use_cnts']:eq("+$(this).val()+")").val());
	});
	$("#addSPay").html($.comma(servicePay));
	$("#endPay").html($.comma(servicePay+totalPay));
}


//연락처 체크
var chkPhone=false;
function phoneChk(){
	var param1 = "&r_phone1="+$("#r_phone1").val()+
	"&r_phone2="+$("#r_phone2").val()+
	"&r_phone3="+$("#r_phone3").val();
	$.popUrl("./pere203_1POP.do?p_id=${p_id}"+param1,"360","150","pere203");	
}

function getPhoneInfo(obj){
	$("#r_phone1").val(obj.r_phone1);
	$("#r_phone2").val(obj.r_phone2);
	$("#r_phone3").val(obj.r_phone3);
}

</script>

<form action="./petc0201T.do" method="post" name="form1" id="frmData">
<input type="hidden" name="p_id" value="${p_id}">
<input type="hidden" name="pg_no" value="${pg_no}">
<input type="hidden" name="reservation_dt" id="reservation_dt" value="${reservation_dt}">

			<table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding-top: 30px;">
				<tr>
					<td><div class="recBlue">&nbsp;</div><strong> 사이트 선택</strong>
					<div style="float: right;padding-right: 40px;">&nbsp;<strong class="orange1" > TODAY : ${nowDtAll }</strong></div>
					</td>
				</tr>
				<tr>
					<td height="5"></td>
				</tr>
				<tr>
					<td>
						<!-- 예약객실 목록 -->
						
						<table width="100%" border="0" cellspacing="4" cellpadding="1"
							bgcolor="#edecec">
							<tr>
								<td bgcolor="#FFFFFF"><table width="100%" border="0"
										cellspacing="0" cellpadding="0" class="tbReservation1">
										<tr align="center">
											<th width="10%" height="35">사이트명</th>
											<th width="14%">이용일자</th>
											<th width="9%">이용기간</th>
											<th width="10%">기준/예약</th>
											<th width="13%"><table
													width="100%" border="0" cellspacing="0" cellpadding="0">
													<tr>
														<td height="18" colspan="2" align="center"><table
																border="0" cellspacing="0" cellpadding="0">
																<tr>
																	<td align="center"
																		style="padding-top: 2px;">예약인원</td>
																</tr>
															</table></td>
													</tr>
													<tr>
														<td height="1" colspan="2" bgcolor="#c0c0bf"></td>
													</tr>
													<tr align="center">
														<td width="50%" height="16" >성인</td>
														<td width="50%" style="border-left-color:#c0c0bf;border-left-style: solid;border-left-width:1px;">아동</td>
													</tr>
												</table></th>
											<th width="11%">기본요금</th>
											<th width="11%">추가요금</th>
											<th width="10%">할인요금</th>
											<th width="12%">합계</th>
										</tr>
										<tr>
											<td height="1" colspan="9" bgcolor="#FFFFFF"></td>
										</tr>
<c:if test="${rooms !=null && fn:length(rooms)>0 }">
	<c:forEach var="map" items="${rooms}" varStatus="status">
		<input name="pr_nos" type="hidden" value="${map.pr_no }"/>
		<input name="reservation_dts" type="hidden" value="${map.reservation_dt }"/>
		<input name="man_cnts" type="hidden" value="${map.man_cnt }"/>
		<input name="chi_cnts" type="hidden" value="${map.chi_cnt }"/>
										<tr align="center">
											<td height="30" bgcolor="#ffffff" class="borderbg" rowspan="1"><table
													border="0" cellspacing="0" cellpadding="0">
													<tr>
														<td align="center" class="bold">${map.room_nm }</td>
													</tr>
												</table></td>
											<td bgcolor="#ffffff" class="borderlbg bold">${fn:substring(map.reservation_dt,0,4)}년 ${fn:substring(map.reservation_dt,4,6)-1}월 ${fn:substring(map.reservation_dt,6,8)}일
											</td>
											<td bgcolor="#ffffff" class="borderlbg"><table border="0"
													cellspacing="0" cellpadding="0">
													<tr>
														<td align="center" class="bold">1박</td>
													</tr>
												</table></td>
											<td bgcolor="#ffffff" class="borderlbg"><table border="0"
													cellspacing="0" cellpadding="0">
													<tr>
														<td align="center" class="bold">${map.use_man_cnt }/${map.man_cnt+map.chi_cnt }</td>
													</tr>
												</table></td>
											<td bgcolor="#ffffff" class="borderlbg"><table
													width="100%" border="0" cellspacing="0" cellpadding="0">
													<tr>
														<td height="30" align="center" class="bold">
															<!--0-->
															<table width="100%" border="0" cellspacing="0"
																cellpadding="0">
																<tr>
																	<td width="50%" height="30" align="center"><table
																			border="0" cellspacing="0" cellpadding="0">
																			<tr>
																				<td align="center" class="bold">${map.man_cnt }명</td>
																			</tr>
																		</table></td>
																	<td width="50%" align="center" class="borderlg"><table
																			border="0" cellspacing="0" cellpadding="0">
																			<tr>
																				<td align="center" class="bold">${map.chi_cnt }명</td>
																			</tr>
																		</table></td>
																</tr>
															</table>
														</td>
													</tr>
												</table></td>
											<td bgcolor="#ffffff" class="borderlbg"><table border="0"
													cellspacing="0" cellpadding="0">
													<tr>
														<td align="center" class="bold"><fmt:formatNumber value="${map.basePay }" pattern="#,###"/>원</td>
													</tr>
												</table></td>
											<td bgcolor="#ffffff" class="borderlbg"><table border="0"
													cellspacing="0" cellpadding="0">
													<tr>
														<td align="center" class="bold"><fmt:formatNumber value="${map.addPay }" pattern="#,###"/>원</td>
													</tr>
												</table></td>
											<td bgcolor="#ffffff" class="borderlbg"><table border="0"
													cellspacing="0" cellpadding="0">
													<tr>
														<td align="center" class="bold">-<fmt:formatNumber value="${map.minusPay }" pattern="#,###"/>원</td>
													</tr>
												</table></td>
											<td bgcolor="#ffffff" class="borderlbg"><table border="0"
													cellspacing="0" cellpadding="0">
													<tr>
														<td align="center" class="bold"><span
															id="total_price"><fmt:formatNumber value="${map.basePay +map.addPay-map.minusPay }" pattern="#,###"/>원</td>
													</tr>
												</table></td>
										</tr>
	</c:forEach>
</c:if>

		
		
									</table></td>
							</tr>
						</table> <!-- 예약사이트 목록 끝 --> <!-- 부가서비스 예약 --> <!-- 부가서비스 예약 끝 -->
					</td>
				</tr>
			</table>
			
			<!-- rtAddSvcList -->
			<table width="100%" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>
					<div class="recBlue">&nbsp;</div><strong style="margin-right: 20px"> 부가서비스 선택</strong>부가서비스를 선택하시면 보다 편하고 즐겁게 캠핑을 즐기실 수 있습니다.
					</td>
				</tr>
				<tr>
					<td height="5"></td>
				</tr>
				<tr>
					<td>
						<table width="100%" border="0" cellspacing="4" cellpadding="1" bgcolor="#edecec">
							<tr>
								<td bgcolor="#FFFFFF">
								
								<table width="100%" class="addService" border="0" cellpadding="0" cellspacing="0" >
									<colgroup>
										<col width="200"  >
										<col width="100">
										<col width="80">
										<col width="*">
										<col width="300">
									</colgroup>	
									<tbody>
<c:if test="${fn:length(serviceList)!=0 }">
									<tr>
										<th>서비스명</th>
										<th>이용요금</th>
										<th>주문수</th>
										<th>캠핑지기 상세설명</th>
										<th>이용고객 요구사항</th>
									</tr>
	<c:forEach var="map1" items="${serviceList}" varStatus="status">
									<tr >
										<td class="bottomLine">
											<input type="hidden" name="as_nos" value="${map1.as_no }">
											<input type="checkbox" name="as_no_idxs" value="${status.index }" onclick="changeAddService();">
											<input type="hidden" name="as_pays" value="${map1.as_pay }">
											${map1.as_nm }
										</td>
										<td class="bottomLine">
										<fmt:formatNumber value="${map1.as_pay }" pattern="#,###"/>원
										</td>
										<td class="bottomLine">
											<select name="use_cnts" onchange="changeAddService();">
												<option value="1">1</option>
												<option value="2">2</option>
												<option value="3">3</option>
												<option value="4">4</option>
												<option value="5">5</option>
												<option value="6">6</option>
												<option value="7">7</option>
												<option value="8">8</option>
												<option value="9">9</option>
												<option value="10">10</option>
											</select> ${map1.as_unit }
										</td>
										<td class="bottomLine">
										${map1.as_desc }
										</td>
										<td class="bottomLine">
											<c:if test="${!empty map1.as_req_memo && ''!= map1.as_req_memo }">
											${map1.as_req_memo }<br/>
											</c:if>
											<input name="req_msgs" type="text" size="30" maxlength="50" value="">
										</td>
									</tr>
	</c:forEach>
</c:if>


									<tr>
										<td colspan="5" align="right" style="padding-right: 20px;font-weight: bold;">
										기본요금 <fmt:formatNumber value="${b_pay }" pattern="#,###"/>원
										+ 부가서비스 <span id="addSPay">0</span> 원
										<c:if test="${rrr_pay !=0 }">- 연박할인 <fmt:formatNumber value="${rrr_pay }" pattern="#,###"/> 원</c:if>
										 = 결제금액 
											<span id="endPay" class="redb" style="font-size: 20px;">
											<fmt:formatNumber value="${totalPay }" pattern="#,###"/></span><span class="redb">원</span>
										</td>
									</tr>
									</tbody>
								</table>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>

			<table width="100%" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>
					<div class="recBlue">&nbsp;</div><strong style="margin-right: 20px"> 예약자정보</strong>
					</td>
				</tr>
				<tr>
					<td height="5"></td>
				</tr>
				<tr>
					<td>
						<table width="100%" border="0" cellspacing="4"
							cellpadding="1" bgcolor="#edecec">
							<tr>
								<td bgcolor="#FFFFFF">
								
								<table class="tbReservation" width="100%" border="0" cellpadding="0" cellspacing="0" >
									<colgroup>
										<col width="15%">
										<col width="35%">
										<col width="15%">
										<col width="30%">
									</colgroup>	
									<tbody>
									<tr>
										<th>예약자명 <span class="calRed">*</span></th>
										<td>
											<input name="reservation_nm" id="reservation_nm" value="" type="text"/>
											예약자 실명을 입력하세요
										</td>
										<th>차량번호 <span class="calRed">*</span></th>
										<td>
											<input name="car_no" value="" type="text"/>
											1사이트 1차량원칙
										</td>
									</tr>
									<tr>
										<th>연락처 <span class="calRed">*</span></th>
										<td>
											<select name="r_phone1" id="r_phone1" onchange="$(this).next().focus();">
													<c:if test="${code1List !=null && fn:length(code1List)>0 }">
														<c:forEach var="map1" items="${code1List}" varStatus="status">
															<option value="${map1.code }">${map1.code }</option>
														</c:forEach>
													</c:if>
											</select> -
											<input name="r_phone2" id="r_phone2" value="" type="text" size="5" maxlength="4"/> -
											<input name="r_phone3" id="r_phone3" value="" type="text" size="5" maxlength="4"/>
	<c:if test="${'Y'==pensionInfo.phone_yn }">
											<a href="#" onclick="phoneChk();"><img src="/camping/img/phone_check.gif" align="middle"/></a>
	</c:if>

											
										</td>
										<th>도착예상시간</th>
										<td>
											<select name="end_time" id="end_time">
												<option value="">캠핑도착시간</option>
												<c:if test="${aList4 !=null && fn:length(aList4)>0 }">
													<c:forEach var="map1" items="${aList4}" varStatus="status">
																<option value="${map1.paa_desc }">${map1.paa_desc }</option>
													</c:forEach>
												</c:if>
											</select>
										</td>
									</tr>
									<tr>
										<th>이메일</th>
										<td>
											<input name="r_email1" id="r_email1" value="" type="text"/>
											@<input type="text" name="r_email2" id="r_email2" value="" style="width: 100px;" /> 
											<select name="" onChange="changeEmail(this);">
												<option value="">직접입력</option>
												<c:if test="${code2List !=null && fn:length(code2List)>0 }">
													<c:forEach var="map1" items="${code2List}" varStatus="status">
														<option value="${map1.code }">${map1.code }</option>
													</c:forEach>
												</c:if>
											</select>
											
										</td>
										<th>결제방법 <span class="calRed">*</span></th>
										<td>
											<input checked="checked" name="pay_type" value="1" type="radio"/> 결제방법 
										</td>
									</tr>
									<tr>
										<th>입금자명 <span class="calRed">*</span></th>
										<td>
											<input name="send_bank_nm" id="send_bank_nm" value="" type="text"/>
											<input type="checkbox" name="same_user" id="same_user" value="Y" onClick="ck_same_user()">
											<label for="same_user">반드시 예약자와 입금자명이 같아야합니다</label>
										</td>
										<th>입금은행 <span class="calRed">*</span></th>
										<td>
											<select name="send_bank" id="select6">
											<c:if test="${aList1 !=null && fn:length(aList1)>0 }">
												<c:forEach var="map1" items="${aList1}" varStatus="status">
															<option value="${map1.paa_desc }">${map1.paa_desc }</option>
												</c:forEach>
											</c:if>
											</select>
											- 예약후  <span class="redb">${pensionInfo.wait_time }시간 이내</span> 입금
										</td>
									</tr>
									<tr>
										<th>예약요청사항</th>
										<td colspan="3" style="padding-top:5px;">
											기타 캠핑에 요청하실 사항을 입력하세요.<br>
											<textarea name="etc_req" style="width: 80%;height: 50px"></textarea>
										</td>
									</tr>
									</tbody>
								</table>
								</td>
							</tr>
						</table></td>
				</tr>
			</table>
			
			<table width="100%" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td><span class="calBlue bold">※ 이용안내</span></td>
				</tr>
				<tr>
					<td><table width="100%" border="0" cellspacing="4"
							cellpadding="5" bgcolor="#edecec">
							<tr>
								<td align="center" bgcolor="#ffffff"><table width="100%"
										border="0" cellpadding="0" cellspacing="0">
										<tr>
											<td align="left" class="grayb"
												style="padding-top: 15px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px;">
												${fn:replace(pensionInfo.intro, lf, "<br/>")}
											</td>
										</tr>
									</table>
									<table width="100%" border="0" cellspacing="1" cellpadding="8">
										<tr>
											<td bgcolor="#FFFFFF"><table width="100%" border="0"
													cellspacing="0" cellpadding="0">
													<tr>
														<td><table width="100%" border="0" cellspacing="0"
																cellpadding="0">
																<tr>
																	<td align="left">-<strong> 환불규정표 (숙박일기준
																			환불%)</strong></td>
																</tr>
															</table>
															<table width="100%" border="0" cellspacing="1"
																cellpadding="5" bgcolor="#DDDDDD">
																<tr align="center" bgcolor="#f5f5f5">
																	<td>숙박당일</td>
																	<td>1일전</td>
																	<td>2일전</td>
																	<td>3일전</td>
																	<td>4일전</td>
																	<td>5일전</td>
																	<td>6일전</td>
																	<td>7일전</td>
																	<td>기본</td>
																</tr>
																<tr align="center" bgcolor="#FFFFFF">
								                                  <td>${refundList.day1 }%</td>
								                                  <td>${refundList.day_a_1 }%</td>
								                                  <td>${refundList.day_a_2 }%</td>
								                                  <td>${refundList.day_a_3 }%</td>
								                                  <td>${refundList.day_a_4 }%</td>
								                                  <td>${refundList.day_a_5 }%</td>
								                                  <td>${refundList.day_a_6 }%</td>
								                                  <td>${refundList.day_a_7 }%</td>
								                                  <td>${refundList.general }%</td>
																</tr>
															</table></td>
													</tr>
												</table></td>
										</tr>
									</table>
									<table width="100%" border="0" cellspacing="0" cellpadding="0">
										<tr>
											<td>&nbsp;</td>
										</tr>
										<tr>
											<td><table border="0" cellspacing="0" cellpadding="0">
													<tr>
														<td><input type="checkbox" name="agree_ref"
															id="agree_ref"></td>
														<td class="paddtop4"><label for="agree_ref">상기의
																이용안내 및 환불규정에 동의합니다</label></td>
														<td class="redb"
															style="padding-top: 4px; padding-left: 20px;">※반드시 읽어
															보시고 예약을 진행해주세요.</td>
													</tr>
												</table></td>
										</tr>
									</table></td>
							</tr>
						</table>
		
						<table style="width: 100%;margin-top: 10px;">
							<tr>
								<td align="center" style="text-align: center;">
									
									<a href="#" onclick="history.go(-1);"><img alt="" src="/camping/img/btn_back.gif"></a>
									<a href="#" onclick="sendData();"><img alt="" src="/camping/img/btn_reservation.gif" ></a>
									
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
</form>